{% extends "base.html" %}

{% load staticfiles %}

{% block content %}

<head>
	<title>Hotels</title>
	<link href="{% static 'style.css' %}" rel='stylesheet'>
</head>


<body>

	<div id="header">
		<a href="/hotels/" id="logo"><img src="{% static 'images/logo.jpg' %}" alt="" width="507" height="88" /></a>																											
		<span>Traditionally  Royal  hotel</span>
		<ul id="menu">
			<li><a href="/hotels/" style="color:black; font-size: 15px;">Home</a></li>
			<li><a href="/users/login/" style="color:black; font-size: 15px;">SignIn</a></li>
			<li><a href="/users/signup/" style="color:black; font-size: 15px;">SignUp</a></li>
			<li><a href="/users/logout/" style="color:black; font-size: 15px;">Logout</a></li>
		</ul>
		<img src="{% static 'images/image.jpg' %}" alt="" width="1000" height="311" /><br />

	</div>

	<div id="content">
		<div class="inside">
			<div id="sidebar">
				<div class="order">

					<form method='post' action='/hotels/search/'>{% csrf_token %}
						<table width="300" cellpadding="0" cellspacing="0">
							<tr>
								<td class="first" style="display:inline;">
									<p style="display:inline-block; width:100px;">	<label >Hotel : </label>
										<input type="text" name="hotel" style="display:inline-block; width:100px"/>	
									</p>

								</td>
							</tr>
							<tr>
								<td class="first" style="display:inline;">

									<p style="display:inline-block; width:75px;">
										<label>City : </label>
										<input type="text" name="city" style="display:inline-block; width:75px;"/>
									</p>

									<p style="display:inline-block; width:75px;">
										<label>Country : </label>
										<input type="text" name="country" style="display:inline; width:75px; margin-left: 30px;"/>
									</p>
								</td>
								
									
								
							</tr>
							<tr>
								<td class="first" style="display:inline;">
									<p>
										<label style="display:inline;">Check-in : </label>
										<input type="text" id="chkindatepicker" name="chkin_date" style="display:inline; width:100px;"/>
									</p>
									<p>
										<label style="display:inline;">Check-out : </label>
										<input type="text" id="chkoutdatepicker" name="chkout_date" style="display:inline; width:100px;"/>
									</p>
								</td>
								<td class="second">
									<p>
										<label>Room Type : </label>
										<select name="room_type">
											<option value="single">Single</option>
											<option value="double">Double</option>
										</select>
									</p>
								</td>
							</tr>
							<tr>

							</tr>
						</table>
						<div class="button"><input type='submit' value='Search' style="display:inline; width:150px;"/></div>				
					</form>
				</div>

				<div class="block">
					<h4>INFO</h4>
					{% if error_message %}
						<p style="color: red; font-size:16px"><strong>{{ error_message }}</strong></p>
					{% endif %}
				</div>
			</div>
				
			</div>
			<div id="center">
			<br>
				<div class="block" style="padding: 0px 50px 10px;">
					<h4>Last News</h4>
						Booking.com offers the choice of over 240,000 hotels in more than 60 countries. Our hotel reviews will help you find the best deal in the right location. Whether you are travelling last minute, as a family or need a hotel for business we have the right hotel deal for you. We also have a 24 hour phone line if you would prefer to speak to someone. Find, compare and book great hotels at great prices all at Hotels.com
				</div>


			</div>
			<div id="photogallery">
				<div class="photos">
					<img src="{% static 'images/photogallery_title.gif'%}" alt="" width="270" height="62" id="title" />
					<a href="#" target="_blank"><img src="{% static 'images/img1.jpg'%}" alt="" width="158" height="100" /></a>
					<span>Name Photo</span>
					<a href="#" target="_blank"><img src="{% static 'images/img2.jpg'%}" alt="" width="158" height="100" /></a>
					<span>Name Photo</span>
					<a href="#" target="_blank"><img src="{% static 'images/img3.jpg'%}" alt="" width="158" height="100" /></a>
					<span>Name Photo</span>
					<a href="#" target="_blank"><img src="{% static 'images/img4.jpg'%}" alt="" width="158" height="100" /></a>
					<span>Name Photo</span>
					<a href="#" id="all"><img src="{% static 'images/all.gif'%}" alt="" width="134" height="21" /></a>		 
				</div>
				<img src="{% static 'images/end.gif'%}" alt="" width="270" height="60" />
			</div>
		</div>	
	</div>
	<div id="footer">
		<ul>
			<li><a href="/hotels/">Home</a></li>
		</ul>
		<div id="copyright">																																																																																																											
			<span>Copyright &copy; MontBlanc Apartments</span>
			<span>&copy; Design by <a href="/hotels/" >Karim Omran</a></span>																																																																	
		</div>
	</div>
 
 		<script>

 		
 			$.datepicker.setDefaults({
							showOn: "both",
							buttonImageOnly: false,
							buttonImage: "calendar.gif",
							buttonText: "Calendar",
							dateFormat: "yy-mm-dd",
						});
			
			$(function() {

				$( "#chkoutdatepicker" ).datepicker();
				$( "#chkindatepicker" ).datepicker();

				});


		</script>

</body>

{% endblock %}
